<template>
    <div>
      <mu-appbar title="主页" class="example-appbar" :class="{'nav-hide': !open}">
        <mu-icon-button @click="toggleNav" icon="menu" slot="left"/>
        <mu-icon-button slot="right" href="https://github.com/museui/muse-ui" icon=":mudocs-icon-custom-github"/>
      </mu-appbar>
    </div>
</template>
<style>

    .mu-appbar{
      height: 64px;
      -ms-flex-item-align: start;
      align-self: flex-start;
      height: 56px;
      padding: 0 8px;
      width: 100%;
      z-index: 100;
    }

    .example-appbar {
      background-color: #ffffff !important;
      position: fixed;
      left: 256px;
      right: 0;
      top: 0;
      width: auto;
      -webkit-transition: all .45s cubic-bezier(.23,1,.32,1);
      transition: all .45s cubic-bezier(.23,1,.32,1);
    }

    .mu-appbar, .mu-appbar>.left, .mu-appbar>.right {
      /*display: -webkit-box;
      display: -ms-flexbox;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-flex: 0;
      -webkit-flex-shrink: 0;
      -ms-flex: 0 0 auto;
      -ms-flex-negative: 0;
      flex-shrink: 0;*/
    }

    .mu-appbar .mu-icon-button {
      color: inherit;
    }

    .mu-icon-button {
      position: relative;
      display: inline-block;
      overflow: visible;
      line-height: 1;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      font-size: 24px;
      padding: 12px;
      border: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background: none;
      color: inherit;
      text-decoration: none;
      -webkit-transition-duration: .3s;
      transition-duration: .3s;
      -webkit-transition-timing-function: cubic-bezier(.23,1,.32,1);
      transition-timing-function: cubic-bezier(.23,1,.32,1);
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-box-flex: 0;
      -webkit-flex-shrink: 0;
      -ms-flex: 0 0 auto;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      margin: 0;
      outline: 0;
      cursor: pointer;
    }

    .mu-appbar-title {
      font-size: 24px;
      line-height: 64px;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      padding-left: 8px;
      padding-right: 8px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-weight: 400;
    }

    .example-appbar.nav-hide {
      left: 0;
    }


</style>
<script>

    export default{
        data(){
          const desktop = isDesktop()
            return{
              open: desktop,
              docked: desktop,
              desktop: desktop,
              title: ''
            }
        },
      methods: {
        toggleNav () {
          this.open = !this.open
        }
      },
      components:{

        }
    }

    function isDesktop () {
      return window.innerWidth > 993
    }

</script>
